{% extends 'base.html' %}

{% block title %}{{ book.title }}{% endblock %}

{% block content %}
<div class="row">
    <!-- 图书基本信息 -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0"><i class="fas fa-book me-2"></i>{{ book.title }}</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        {% if book.cover_image %}
                            <img src="{{ book.cover_image.url }}" class="img-fluid rounded" alt="{{ book.title }}">
                        {% else %}
                            <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 300px;">
                                <i class="fas fa-book fa-4x text-muted"></i>
                            </div>
                        {% endif %}
                    </div>
                    <div class="col-md-8">
                        <h5 class="text-muted mb-3">
                            <i class="fas fa-user me-2"></i>{{ book.author.name }}
                        </h5>
                        
                        {% if book.category %}
                        <span class="category-badge mb-2" style="background-color: {{ book.category.color }};">
                            {{ book.category.name }}
                        </span>
                        {% endif %}
                        
                        <div class="mb-3">
                            {% if book.average_rating > 0 %}
                            <div class="rating-stars">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= book.average_rating %}
                                        <i class="fas fa-star"></i>
                                    {% else %}
                                        <i class="far fa-star"></i>
                                    {% endif %}
                                {% endfor %}
                                <span class="ms-2 text-muted">{{ book.average_rating|floatformat:1 }} / 5.0</span>
                            </div>
                            {% else %}
                            <span class="text-muted">暂无评分</span>
                            {% endif %}
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-6">
                                <small class="text-muted">ISBN:</small><br>
                                <strong>{{ book.isbn }}</strong>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">出版日期:</small><br>
                                <strong>{{ book.publish_date|date:"Y年m月d日" }}</strong>
                            </div>
                        </div>
                        
                        {% if book.publisher %}
                        <div class="mb-3">
                            <small class="text-muted">出版社:</small><br>
                            <strong>{{ book.publisher.name }}</strong>
                        </div>
                        {% endif %}
                        
                        <div class="row mb-3">
                            <div class="col-6">
                                <small class="text-muted">语言:</small><br>
                                <strong>{{ book.language }}</strong>
                            </div>
                            {% if book.pages %}
                            <div class="col-6">
                                <small class="text-muted">页数:</small><br>
                                <strong>{{ book.pages }}页</strong>
                            </div>
                            {% endif %}
                        </div>
                        
                        {% if book.price %}
                        <div class="mb-3">
                            <small class="text-muted">价格:</small><br>
                            <strong class="text-success">¥{{ book.price }}</strong>
                        </div>
                        {% endif %}
                        
                        {% if book.location %}
                        <div class="mb-3">
                            <small class="text-muted">馆藏位置:</small><br>
                            <strong>{{ book.location }}</strong>
                        </div>
                        {% endif %}
                        
                        <div class="row mb-3">
                            <div class="col-6">
                                <small class="text-muted">库存:</small><br>
                                <strong>{{ book.quantity }}本</strong>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">借阅次数:</small><br>
                                <strong>{{ book.borrow_count }}次</strong>
                            </div>
                        </div>
                        
                        <div class="d-flex gap-2">
                            {% if user.is_authenticated %}
                                {% if book.quantity > 0 %}
                                    {% if user_has_borrowed %}
                                        <button class="btn btn-warning" disabled>
                                            <i class="fas fa-bookmark me-1"></i>已借阅
                                        </button>
                                    {% else %}
                                        <a href="{% url 'borrow_book' book.pk %}" class="btn btn-success">
                                            <i class="fas fa-bookmark me-1"></i>借阅
                                        </a>
                                    {% endif %}
                                {% else %}
                                    <button class="btn btn-secondary" disabled>
                                        <i class="fas fa-times me-1"></i>已借完
                                    </button>
                                {% endif %}
                            {% else %}
                                <a href="{% url 'login' %}" class="btn btn-primary">
                                    <i class="fas fa-sign-in-alt me-1"></i>登录后借阅
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图书摘要 -->
        {% if book.summary %}
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-file-text me-2"></i>图书摘要</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">{{ book.summary|linebreaks }}</p>
            </div>
        </div>
        {% endif %}
        
        <!-- 用户评论 -->
        <div class="card mt-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-comments me-2"></i>用户评论</h5>
                <span class="badge bg-primary">{{ reviews.count }}条评论</span>
            </div>
            <div class="card-body">
                {% if user.is_authenticated and not user_has_reviewed %}
                <div class="mb-4">
                    <h6>添加评论</h6>
                    <form method="post">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-6">
                                {{ review_form.rating.label_tag }}
                                {{ review_form.rating }}
                            </div>
                        </div>
                        <div class="mt-3">
                            {{ review_form.comment.label_tag }}
                            {{ review_form.comment }}
                        </div>
                        <button type="submit" class="btn btn-primary mt-3">
                            <i class="fas fa-paper-plane me-1"></i>提交评论
                        </button>
                    </form>
                </div>
                <hr>
                {% endif %}
                
                {% if reviews %}
                    {% for review in reviews %}
                    <div class="border-bottom pb-3 mb-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">{{ review.user.username }}</h6>
                                <div class="rating-stars mb-2">
                                    {% for i in "12345" %}
                                        {% if forloop.counter <= review.rating %}
                                            <i class="fas fa-star"></i>
                                        {% else %}
                                            <i class="far fa-star"></i>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                            <small class="text-muted">{{ review.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        {% if review.comment %}
                        <p class="mb-0">{{ review.comment }}</p>
                        {% endif %}
                    </div>
                    {% endfor %}
                {% else %}
                <p class="text-muted text-center py-3">暂无评论，成为第一个评论者吧！</p>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 侧边栏 -->
    <div class="col-lg-4">
        <!-- 相关图书 -->
        {% if related_books %}
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-link me-2"></i>相关图书</h6>
            </div>
            <div class="card-body">
                {% for related_book in related_books %}
                <div class="d-flex mb-3">
                    {% if related_book.cover_image %}
                        <img src="{{ related_book.cover_image.url }}" class="rounded me-3" style="width: 60px; height: 80px; object-fit: cover;">
                    {% else %}
                        <div class="bg-light rounded me-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 80px;">
                            <i class="fas fa-book text-muted"></i>
                        </div>
                    {% endif %}
                    <div class="flex-grow-1">
                        <h6 class="mb-1">{{ related_book.title }}</h6>
                        <p class="text-muted small mb-1">{{ related_book.author.name }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="badge bg-{% if related_book.quantity > 0 %}success{% else %}danger{% endif %} small">
                                {% if related_book.quantity > 0 %}{{ related_book.quantity }}本可借{% else %}已借完{% endif %}
                            </span>
                            <a href="{% url 'book_detail' related_book.pk %}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        <!-- 作者信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-user me-2"></i>作者信息</h6>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    {% if book.author.photo %}
                        <img src="{{ book.author.photo.url }}" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
                    {% else %}
                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 100px; height: 100px;">
                            <i class="fas fa-user fa-2x text-muted"></i>
                        </div>
                    {% endif %}
                </div>
                <h6 class="text-center mb-2">{{ book.author.name }}</h6>
                {% if book.author.nationality %}
                <p class="text-muted text-center small mb-2">{{ book.author.nationality }}</p>
                {% endif %}
                {% if book.author.biography %}
                <p class="small">{{ book.author.biography|truncatewords:30 }}</p>
                {% endif %}
                <div class="text-center">
                    <span class="badge bg-info">{{ book.author.books.count }}本作品</span>
                </div>
            </div>
        </div>
        
        <!-- 统计信息 -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-chart-bar me-2"></i>统计信息</h6>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6">
                        <h5 class="text-primary mb-1">{{ book.borrow_count }}</h5>
                        <small class="text-muted">借阅次数</small>
                    </div>
                    <div class="col-6">
                        <h5 class="text-success mb-1">{{ book.view_count }}</h5>
                        <small class="text-muted">浏览次数</small>
                    </div>
                </div>
                <hr>
                <div class="row text-center">
                    <div class="col-6">
                        <h5 class="text-warning mb-1">{{ book.average_rating|floatformat:1 }}</h5>
                        <small class="text-muted">平均评分</small>
                    </div>
                    <div class="col-6">
                        <h5 class="text-info mb-1">{{ reviews.count }}</h5>
                        <small class="text-muted">评论数量</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 